<template>
	<view class="main">
		<u-navbar :is-back="true" title="专题" :background="background" :border-bottom="false" title-color="#fff"
			title-size="35rpx" title-bold="true" back-icon-color="#fff">
		</u-navbar>

		<u-sticky offset-top="100" bg-color=" #111111;">
			<view class="tabs">
				<view class="tabw" v-for="item,index in type" :key="index">
					<view :class="tabed==index?'taborder':'tab'" @click="tabeds(index)">
						{{item.title}}
					</view>
				</view>
			</view>
		</u-sticky>
		<block v-if="tabed==0">



		</block>
		<block v-if="tabed==1">
			<view class="seconds" v-for="item in 4" @click="router('../blind_details/blind_details')">
				<view class="translate">
					<view class="tr_img">
						<image src="https://cdn.uviewui.com/uview/swiper/1.jpg" mode=""></image>
					</view>
					<view class="tt_tit">
						非遗皮影系列盲盒
					</view>
					<view class="count">
						<text class="coun_name">限量</text>
						<text class="coun_num">1000份</text>
					</view>
					<view class="sec_bot">
						<view class="market">
							<image src="../../../static/images/chosed.png" mode="aspectFit"></image>
							<text>红果文化盲盒有限公司发行</text>
						</view>
						<view class="sec_moneys">
							<text>￥</text>69.00
						</view>
					</view>
				</view>
			</view>
		</block>
		<block v-if="tabed==2">
			<view class="seconds" v-for="item in 4" @click="router('../sale_details/sale_details')">
				<view class="endtime">
					即将开售
					<text>04-19 12:30</text>
				</view>
				<view class="translate">
					<view class="tr_img">
						<image src="https://cdn.uviewui.com/uview/swiper/1.jpg" mode=""></image>
					</view>
					<view class="tt_tit">
						非遗皮影系列盲盒
					</view>
					<view class="count">
						<text class="coun_name">限量</text>
						<text class="coun_num">1000份</text>
					</view>
					<view class="sec_bot">
						<view class="market">
							<image src="../../../static/images/chosed.png" mode="aspectFit"></image>
							<text>红果文化盲盒有限公司发行</text>
						</view>
						<view class="sec_moneys">
							<text>￥</text>69.00
						</view>
					</view>
				</view>
			</view>
		</block>
		<!-- <u-loading :show="show" style="margin-top: 100rpx;"></u-loading> -->
	</view>
</template>
<script>
	export default {
		data() {
			return {
				background: {
					backgroundColor: '#111111',
				},
				tab: ['非遗皮影', '美术字化', '卡通手办'],
				tabed: '',
				currentIndex: 0,
				type:[]
			}
		},
		onShow() {

		},
		onLoad(options) {
			this.getspecial()

		},

		methods: {
			swierChange(e) {
				this.currentIndex = e.detail.current
			},
			tabeds(e) {
				console.log(e);
				this.tabed = e
			},
			router(path) {
				uni.navigateTo({
					url: path
				})
			},
			getspecial() {
				global.$http.request({
					url: '/api/home/seriesList',
					data:{
						token:uni.getStorageSync('token')
					}
				}).then(res => {
					if (res.data.code == 0) {
						console.log(res.data.data);
						this.type=res.data.data.list
						console.log(this.type);
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		width: 750rpx;
		// height: 100%;
		font-family: PingFang SC;
		background-color: #111111;
		font-family: PingFang SC-Regular, PingFang SC;

		.main {

			height: 100%;
			width: 750rpx;
			overflow: hidden;

			.wrap {
				padding: 98rpx 32rpx 10rpx 32rpx;
			}

			.tabs {
				background-color: #111111;
				display: flex;
				justify-content: space-between;
				margin-bottom: 60rpx;

				.tabw {
					width: 350rpx;
					height: 140rpx;
					text-align: center;
					margin: 46rpx 36rpx 16rpx 38rpx;
					font-size: 32rpx;
					font-weight: 400;
					color: #FFFFFF;
				}

				.taborder {
					height: 68rpx;
					line-height: 68rpx;
					// background: #08080B;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					opacity: 1;
					border: 2rpx solid #616C90;
				}

				.tab {
					height: 68rpx;
					line-height: 68rpx;
					// background: #08080B;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					opacity: 0.2;
				}

			}

			// .swipe {

			// 	// position: absolute;
			// 	// left: 8% ;
			// 	.bg {
			// 		width: 580rpx;
			// 		height: 816rpx;
			// 	}
			// }

			// .top {
			// 	position: absolute;
			// 	display: flex;
			// 	align-items: center;
			// 	top: 40rpx;
			// 	left: 40rpx;

			// 	.title {
			// 		font-size: 36rpx;
			// 		font-weight: bold;
			// 		color: #FFFFFF;
			// 	}

			// 	.num {
			// 		margin-left: 20rpx;
			// 		display: block;
			// 		font-size: 24rpx;
			// 		font-weight: 800;
			// 		height: 44rpx;
			// 		padding: 1rpx 12rpx;
			// 		color: #F9E481;
			// 		border-radius: 18rpx;
			// 		opacity: 1;
			// 		border: 1rpx dashed #F9E481;
			// 	}
			// }

			// .shop {
			// 	position: absolute;
			// 	top: 98rpx;
			// 	left: 40rpx;
			// 	display: flex;

			// 	image {
			// 		width: 36rpx;
			// 		height: 36rpx;

			// 	}

			// 	text {
			// 		padding-left: 12rpx;
			// 		font-size: 24rpx;
			// 		font-weight: 400;
			// 		color: #FFFFFF;
			// 		opacity: 0.5;
			// 	}
			// }

			// .moneys {
			// 	text {
			// 		font-size: 28rpx;
			// 		font-weight: 400;
			// 		color: #FFFFFF;
			// 	}

			// 	position: absolute;
			// 	top: 582rpx;
			// 	left: 165rpx;
			// 	width: 106px;
			// 	font-size: 40rpx;
			// 	font-weight: 400;
			// 	color: #FFFFFF;

			// }

			// .button {
			// 	position: absolute;
			// 	top: 662rpx;
			// 	left: 40rpx;

			// 	image {
			// 		position: absolute;
			// 		top: 0;
			// 		z-index: 0;
			// 	}

			// 	.start {
			// 		width: 364rpx;
			// 		position: absolute;
			// 		top: 28rpx;
			// 		left: 70rpx;
			// 		display: flex;
			// 		z-index: 10;

			// 		text {
			// 			font-size: 28rpx;
			// 			font-weight: 400;
			// 			color: #2DEAE6;
			// 		}

			// 		.time {
			// 			padding-left: 16rpx;
			// 		}
			// 	}
			// }

			// .other {
			// 	height: 200rpx;
			// 	color: #fff;

			// 	view {
			// 		padding: 2rpx 15rpx;
			// 		border-radius: 20rpx;
			// 		border: 1rpx solid #fff;
			// 		opacity: 0.5;
			// 	}
			// }

			// .other :first-child {
			// 	position: absolute;
			// 	top: 582rpx;
			// 	right: 60rpx;
			// 	z-index: -1;
			// }

			// .other :last-child {
			// 	position: absolute;
			// 	top: 642rpx;
			// 	right: 75rpx;
			// 	z-index: -1;
			// }

			// .other2 {
			// 	height: 200rpx;
			// 	color: #fff;

			// 	view {
			// 		padding: 2rpx 15rpx;
			// 		border-radius: 20rpx;
			// 		border: 1rpx solid #fff;
			// 		opacity: 0.0;
			// 	}
			// }

			// .other2 :first-child {
			// 	position: absolute;
			// 	top: 582rpx;
			// 	right: 60rpx;
			// 	z-index: 10;
			// }

			// .other2 :last-child {
			// 	position: absolute;
			// 	top: 642rpx;
			// 	right: 75rpx;
			// 	z-index: 10;
			// }

			// .slide-image {
			// 	position: absolute;
			// 	height: 400rpx;
			// 	width: 400rpx;
			// 	z-index: 5;
			// 	opacity: 0.7;
			// 	z-index: 10;
			// 	top: 158rpx;
			// 	left: 40rpx;
			// 	// margin: 0 20rpx;
			// }

			// .swipers {

			// 	height: 816rpx;
			// 	position: relative;
			// 	left: 50rpx;
			// }

			// .active {
			// 	opacity: 1;
			// 	z-index: 10;
			// 	height: 400rpx;
			// 	width: 400rpx;
			// 	top: 158rpx;
			// 	left: 40rpx;
			// 	// transition: all 0.2s ease-in 0s;
			// }

			// .activeafter {
			// 	opacity: 1;
			// 	z-index: 10;
			// 	height: 316rpx;
			// 	width: 440rpx;
			// 	top: 30%;
			// 	// transition: all 0.2s ease-in 0s;
			// }


			.seconds {
				margin: 24rpx 32rpx;
				border-radius: 32rpx 32rpx 32rpx 32rpx;
				opacity: 1;
				border: 2rpx solid #34302F;
				background: #353130;
				position: relative;

				.endtime {
					position: absolute;
					top: 0;
					left: 0;
					padding: 16rpx;
					background: #000000;
					border-radius: 32rpx 0rpx 32rpx 0rpx;
					opacity: 0.5;
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #2DEAE6;

					text {
						padding-left: 12rpx;
					}
				}

				.translate {
					border-radius: 32rpx 32rpx 32rpx 32rpx;

					.tr_img {
						width: 686rpx;
						margin: 0 auto;

						image {
							border-radius: 32rpx 32rpx 32rpx 32rpx;
							width: 686rpx;
							height: 686rpx;
						}
					}

					.tt_tit {
						font-size: 32rpx;
						font-weight: bold;
						font-family: PingFang SC-Bold, PingFang SC;
						color: #FFFFFF;
						padding: 24rpx 0 16rpx 32rpx;
					}

					.count {
						padding: 0rpx 32rpx 10rpx 32rpx;

						.coun_name {
							padding: 2rpx 8rpx;
							background: #F4BF57 !important;
							border-radius: 8rpx 0rpx 0rpx 8rpx;
							opacity: 1;
							font-size: 24rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #333333 !important;

						}

						.coun_num {
							padding: 2rpx 8rpx;
							font-size: 24rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #DBBE7E;
							background: #4C484B;
							border-radius: 8rpx 8rpx 8rpx 8rpx;
							opacity: 1;

						}
					}


					.sec_bot {
						padding: 0rpx 32rpx 32rpx 32rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.market {
							display: flex;
							align-items: center;

							image {
								width: 36rpx;
								height: 36rpx;
								padding-right: 12rpx;
							}

							text {
								font-size: 24rpx;
								font-family: PingFang SC-Regular, PingFang SC;
								font-weight: 400;
								color: #FFFFFF;

							}
						}

						.sec_moneys {
							font-size: 48rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #FFFFFF;

							text {
								font-size: 32rpx;
								font-family: PingFang SC-Regular, PingFang SC;
								font-weight: 400;
								color: #FFFFFF;
							}
						}
					}

				}
			}
		}
	}
</style>
